<template>
    <a-collapse :default-active-key="['1', 2]" v-model="dataSource">

        <a-collapse-item header="遇到火灾，我们到底该如何正确逃生?" key="1">

            <div class="frame-bg">
                <div class="frame-body">

                    <div class="frame-aside">
                        <a-steps :current="current" direction="vertical" @change="setCurrent" changeable>
                            <a-step  v-for="(item,index) in dataSource" >
                                {{dataSource[index]?.step}}
                            </a-step>
                        </a-steps>
                    </div>

                    <div class="frame-main">

                        <div style="margin: 20px 30px 20px 30px">
                            {{dataSource[current-1].content}}
                        </div>
                        <div class="main-content" >
                            <img :src="dataSource[current-1].imageUrl">
                        </div>

                        <div class="main-bottom">
                            <a-button :disabled="current===1" @click="onPrev">
                                <icon-left/>
                                Back
                            </a-button>
                            <a-button :disabled="current===dataSource.length" @click="onNext">
                                Next
                                <icon-right/>
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>

        </a-collapse-item>

        <a-collapse-item header="日常防火知识" key="2">

            <a-collapse :default-active-key="['1.1']" destroy-on-hide v-for="i in daily">
                <a-collapse-item :header="i.title" key="1.1">
                    <div>
                        {{i.content}}
                    </div>
                </a-collapse-item>

            </a-collapse>


        </a-collapse-item>

        <a-collapse-item :header="i.title" key="3" v-for="i in videoUrl">




                    <video width="80%" height="540" controls>
                        <source :src="i.url" type="video/mp4">
                        <source src="movie.ogg" type="video/ogg">您的浏览器不支持 video 标签。
                    </video>





        </a-collapse-item>

    </a-collapse>
</template>

<script setup>

    import {reactive} from 'vue'
    import {ref} from "@vue/reactivity";

    const dataSource=[
        {
            step: '弄清楚火势',
            content: '通过烟气蔓延方向或楼道应急广播判断起火位置、火势情况，根据火势大小和自己所处环境，及时做出固守待援还是迅速逃生的决定',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/41ed6abfcc474656bcc78ae3306b7531.jpg'
        },
        {
            step: '切勿乘坐电梯逃生',
            content: '因为火灾发生后，电梯井会成为烟气迅速蔓延扩散的通道，火灾产生的高热会使电梯系统出现异常，一旦停电，电梯容易卡住，将人闷在里面，所以，火场逃生疏散时，千万不能乘坐普通电梯。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/01ae2fe25e1c49ba88249c276e7e9b70.jpg'
        },
        {
            step: '疏散过程',
            content: '注意照顾老年人和残疾人。如果带着孩子，千万不能把婴儿放在儿童车里推着跑，而应背着或者抱着孩子进行疏散。如果已经疏散到建筑物外，不要再重新返回。如有情况应报告消防队员，请求其援助救援。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/41ed6abfcc474656bcc78ae3306b7531.jpg'
        },
        {
            step: '开门逃生前',
            content: '先用手触摸房门，如果房门变热，则不能轻易打开，否则烟和火就会直接冲入室内。要马上选择一个暂时避险的地方，' +
                '最好是有水源，靠近窗口，用湿床单封堵门缝，延缓烟气蔓延。不要贸然打开门窗，有毒烟气会迅速进入房间，也会造成火势迅速向房间内蔓延。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/2410dac70c5a49ec95d854fb9dae03db.jpg'
        },
        {
            step: '紧急情况',
            content: '遇到浓烟时，可利用身边的衣服、毛巾或者其它可利用的东西沾湿捂住口鼻，' +
                '并尽量降低行走姿势，以免烟气进入呼吸道。在逃生途中，如果烟气特别浓而使人感到呼吸困难，可贴近地面爬行。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/5564d248850e4e62b755864e83a7e6f7.jpg'
        },
        {
            step: '大火将安全出口封堵',
            content: '可以在阳台或者楼顶打电话求救，或者用醒目的物品引起消防员的注意，以便及时获救。也可用床单、窗帘或者其它绳索从窗户滑下逃生，还可沿着建筑物外的落水管等这些附属设施逃生。被困在二楼无法逃生时，可先向地面扔一些棉被等柔软物品，再用手扒住窗台，自然下滑逃生，不要盲目跳楼，也不要强行穿过浓烟烈火区进行逃生。',
            imageUrl: 'https://yjt.hunan.gov.cn/yjt/tszt/aqzs/201912/11004880/images/116c234121534404b8c4cabef36a0ee6.jpg'
        }
    ]


    const current = ref(1);

    const onPrev = () => {
        current.value = Math.max(1, current.value-1);
    };

    const onNext = () => {
        current.value = Math.min(dataSource.length, current.value + 1);
    };


    const images = [
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
    ];


    const setCurrent=(num)=> {
        current.value = num
    }

    const daily=[
        {
            title: '校园宿舍防火安全知识',
            content: '为了杜绝学生宿舍发生火灾事故，同学们要做到十戒：\n' +
                '\n' +
                '一戒私自乱拉电源线路，避免电线缠绕在金属床架上或穿行于可燃物中间，避免接线板被可燃物覆盖。\n' +
                '\n' +
                '二戒违规使用电热器具。\n' +
                '\n' +
                '三戒使用大功率电器。\n' +
                '\n' +
                '四戒使用电器无人看管，必须人走断电。\n' +
                '\n' +
                '五戒明火照明，灯泡照明不得用可燃物作灯罩，床头灯宜用冷光源灯管。\n' +
                '\n' +
                '六戒室内乱扔、乱丢火种。\n' +
                '\n' +
                '七戒室内燃烧杂物、点蚊香等。\n' +
                '\n' +
                '八戒室内存入易燃易爆物品。\n' +
                '\n' +
                '九戒室内抽烟乱扔烟头。\n' +
                '\n' +
                '十戒使用假、冒、伪劣电器。'
        },
        {
            title: '学校防火应密切关注三处地点',
            content: '学校是人员聚集场所也是消防安全的重点单位，学校一旦发生火灾不仅会危及到众多学生的人身安全，也可能会毁掉很多珍贵的档案资料，更会影响教学秩序和社会的稳定。那么学校里有哪些地点容易发生火灾呢？找出原因并采取相应的预防措施，可以有效保障学校师生的安全。\n' +
                '\n' +
                '一、学校的化学实验室。化学实验室既有热源，又有化学药剂，同时又有相当数量的用电设备，极易因人员操作不当或设备故障引发火灾。\n' +
                '\n' +
                '二、计算机房。计算机房内用电设备多、机器运转时间长、用电量大，电器线路不合格或接触不良等因素均能引发火灾。\n' +
                '\n' +
                '三、图书馆、档案室、阅览室。这些场所都储藏着大量的图书资料及影像制品，人员流动频繁，电气设备长期使用，容易因遗留火种或电器线路故障引发火灾。在对图书熏蒸杀虫时，因杀虫剂为易燃易爆物品，如果使用不当也易引起火灾。\n' +
                '\n' +
                '预防措施如下：\n' +
                '\n' +
                '一、在实验室中，经常进行蒸馏、滤取、电解等火灾危险性较大的作业，用火用电多。对此，学校要制定严格的实验操作规程和实验室消防安全制度。实验室的电器设备应符合防爆要求；实验室应具备两个以上的安全疏散出口；实验室常用的危险化学品或剩余总量不得超过５公斤；实验室应采取可靠的防火安全措施。\n' +
                '\n' +
                '二、计算机房是防火的重点。计算机房的外墙、间壁、地毯、装饰墙应采用非燃烧材料建造，空调系统应采用连锁装置，通风管道的保温材料应用难燃烧或非燃烧材料。实验室要严格电气操作规程，电缆沟要采取防潮和防鼠咬等措施；在擦拭机器时应用洗涤剂，不能用易燃液体。\n' +
                '\n' +
                '三、图书馆和档案馆的工作人员离开时要切断电源确认无遗留火种才能离开。在书库内不得使用碘钨灯照明；采用白炽灯时，距离可燃物不应少于５０厘米；在书库内不得使用任何电器。图书馆和档案馆应严格按照《建筑设计防火规范》进行设计、建设，应安装室内外消防给水设备，安装火灾自动报警、自动灭火系统，配置足够的灭火器材。要加强日常防火管理，严格控制用火，在对图书馆和档案馆杀虫时，应在相关人员的指导下，采取安全可靠的措施进行。\n' +
                '\n' +
                '四、学校应加强消防安全宣传教育，提高全校师生的消防安全意识，同时加大对校内违规使用电器等行为的排查力度，减少安全隐患。'

        },
        {
            title: '学校防火记住这些',
            content: '再过两周\n' +
                '\n' +
                '同学们都将\n' +
                '\n' +
                '放！暑！假！\n' +
                '辛苦了一个学期后\n' +
                '\n' +
                '你是在家睡个三天三夜\n' +
                '\n' +
                '还是约上同学\n' +
                '\n' +
                '开始狂欢派对？\n' +
                '\n' +
                '\n' +
                '\n' +
                '或者，来一场\n' +
                '\n' +
                '说走就走的旅行？\n' +
                '\n' +
                '说到这里\n' +
                '\n' +
                '阿消这敏感的神经\n' +
                '\n' +
                '又马上警觉起来\n' +
                '\n' +
                '\n' +
                '\n' +
                '假期也是各种意外的\n' +
                '\n' +
                '高！发！期！\n' +
                '如溺水、诈骗、交通事故等\n' +
                '\n' +
                '大伙儿还真的得\n' +
                '\n' +
                '提高警惕呢！'
        }
    ]

    const videoUrl=[
        {
            title: '火场逃生知识',
            url: 'https://multifunctional.oss-cn-shanghai.aliyuncs.com/v.f30.mp4'
        },

    ]
</script>

<style scoped>
    .frame-body {
        display: flex;
        background: var(--color-bg-2);
    }

    .frame-aside {
        padding: 24px;
        height: 272px;
        border-right: 1px solid var(--color-border);
    }

    .frame-main {
        width: 100%;
    }

    .main-content {
        text-align: center;
        line-height: 100px;
    }

    .main-bottom {
        display: flex;
        justify-content: center;

    button {
        margin: 0 20px;
    }

    }
</style>